<template>
  <view class="container">

    <scroll-view scroll-y="true" @scrolltolower="lower()">

      <!--            {{ myFavoriteList || ""}}-->
      <template v-for="(myFavorite, index) in myFavoriteList">
        <navigator :url="`/subpages/houseinfo/houseinfo?id=${myFavorite.zuInfo.id}`" hover-class="navigator-hover">
          <view class="house-info">
            <view class="info-pic-warp">
              <image class="info-pic" :src="getImageUrl(myFavorite.zuInfo.imgUrls)"></image>
            </view>
            <view class="info-detail">
              <view class="detail-title">
                {{ myFavorite.zuInfo.title || "" }}
              </view>
              <!--              <view class="detail-feature">-->
              <!--                <text class="detail-feature-decoration">-->
              <!--                  {{ myFavorite.zuInfo.decoration || ""}}-->
              <!--                </text>-->
              <!--              </view>              -->
              <view class="detail-feature">
                <text class="detail-feature-area">
                  {{ myFavorite.zuInfo.area || "" }}
                </text>
                <text v-if="myFavorite.zuInfo.area && myFavorite.zuInfo.orientation">|</text>
                <text v-if="!(myFavorite.zuInfo.area && myFavorite.zuInfo.orientation)" style="visibility: hidden">|
                </text>
                <text class="detail-feature-orientation">
                  {{ myFavorite.zuInfo.orientation || "" }}
                </text>
              </view>
              <view class="detail-price">
                {{ myFavorite.zuInfo.price || "" }}
                <text class="price-unit">元/月</text>
              </view>
            </view>
          </view>
        </navigator>
      </template>
    </scroll-view>
  </view>
</template>

<script>
import {checkLogin, getImageUrl} from "@/config/util/common";
import {getMyFavoriteList} from "@/config/api";

export default {
  data() {
    return {
      userInfo: this.$store.state.userInfo,
      myFavoriteList: []
    };
  },
  onLoad() {
    if (!checkLogin(true)) {
      return;
    }

  },
  onShow() {

    //查询房源是否被收藏
    getMyFavoriteList({
      orderByColumn: "create_time",
      isAsc: "desc",
      userId: this.userInfo.userId
    }).then(favListRes => {
      this.myFavoriteList = favListRes.rows;
    })
  },
  methods: {
    getImageUrl,
    lower() {

    }
  }
}
</script>

<style scoped lang="scss">

.container {
  justify-content: unset;
  flex-direction: column;
  align-items: unset;


  .house-info {
    padding-left: $sys-padding-30;
    padding-right: $sys-padding-30;


    display: flex;
    border-bottom: 1px solid $sys-color-grey-170;
    padding-top: $sys-padding-30;
    padding-bottom: $sys-padding-30;

    .info-pic-warp {
      padding-right: $sys-padding-30;

      .info-pic {
        width: 250rpx;
        height: 150rpx;
      }
    }

    .info-detail {
      font-size: 13px;

      .detail-title {
        font-weight: bolder;
      }

      .detail-feature {

        //font-size: 12px;
        //
        //.detail-feature-decoration {
        //  background-color: rgb(230, 246, 254);
        //  color: rgb(129, 211, 248);
        //  padding: 5rpx;
        //}


        color: $sys-color-grey-170;

        .detail-feature-area {
          margin-right: 30rpx;
        }

        .detail-feature-orientation {
          margin-left: 30rpx;
        }

      }

      .detail-price {
        color: $sys-color-pink-weight;

        .price-unit {
          font-size: 15px;
          color: $sys-color-pink-weight;
        }
      }
    }
  }


}
</style>
